<template>
  <div>
      <Header></Header>
            <div class="udlite-container partners">
          <van-cell-group>

              <van-tabs v-model="active">
              
              <van-tab title="用户名登录">
              <van-field v-model='username'  label='用 户 名：' placeholder='请输入账号' />
              </van-tab>
              <van-tab title="手机号登录">
              <van-field v-model='phone'  label='电 话 号：' placeholder='请输入手机号' />
              </van-tab>
              <van-tab title="邮箱登录">
              <van-field v-model='email'  label='邮  箱：' placeholder='请输入邮箱' />
              </van-tab>
              </van-tabs>
              <van-field v-model='password'  label='密    码：' placeholder='请输入密码' />
              <!-- #验证码 -->
              <van-cell-group>
                    <drag-Verify :width='width' :height='height' :text='text' ref="Verify">

                    </drag-Verify>
              </van-cell-group>
              <van-button type="primary" @click="submit">登录</van-button>
              <van-button type="info" @click="submit1">重置</van-button>
              
           </van-cell-group>   
        </div>
      <Foot></Foot>
  </div>
</template>

<script>
// import Header from './myheader'
// import Foot from './foot'
import dragVerify from 'vue-drag-verify'

export default {
data() {
    return {
        username:'',
        password:'',
        active:1,
        phone:'',
        email:'',
        width:320,
        height:42,
        text:'请您拖动滑块'
    }
},
components:{
        Header,
        Foot,
        dragVerify,
    },
methods:{
    submit:function(){
        if(this.username =='' && this.phone == '' && this.email == ''){
                this.$toast('用户或手机号,邮箱不能为空')
                return false
            }
        if(this.password == ''){
                this.$toast('密码不能为空')
                return false
            }
            // 亲求后端接口
        this.axios.post('http://127.0.0.1:8000/login1/',{username:this.username,
        password:this.password,phone:this.phone,email:this.email,active:this.active}).then(resp=>{
            // console.log(this.$refs.Verify.isPassing);
            var data = this.$refs.Verify.isPassing
            if (data == true){
                if(resp.data.code==200){
                    this.$toast('登陆成功')
                    console.log(resp.data);
                    sessionStorage.setItem('username',resp.data.username)
                    sessionStorage.setItem('uid',resp.data.uid)
                }else{
                    this.$toast(resp.data.msg)
                }
            }else{
                this.$toast(resp.data.msg)
                this.$toast('请您拖动滑块')
            }
        })
//  console.log(this.$refs.Verify.isPassing);
    },
     submit1:function(){
         this.$toast('重置成功')
         this.$router.go(0)
     }
  }
}
</script>

<style>

</style>